<template>
  <el-form ref="form" :model="forms.data" label-width="auto" :label-position="labelPosition" 
    :rules="forms.rules" :size="size" :inline="!forms.inline">
    <el-form-item
      v-for="(item, index) in forms.compValue"
      :key="index"
      :label="item.type === 'button' ? '' : item.label"
      :prop="item.value"
      v-show="!item.show || item.show == true ? true : false"
      ref="item"
    >
      <el-input
        v-if="item.type == 'iconinput'"
        v-model.trim="forms.data[item.value]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
        @change="item.change?item.change(forms.data[item.value]):item.id?change(item,forms.data[item.value]):false"
        @keyup.enter.native="item.onclick?item.onclick(forms[item.value]):false"
      >
      <template #append>
          
        <el-button :icon="Search" @click="item.onclick(forms[item.value])" />
      </template>
      </el-input>
      <el-input
        v-if="item.type == 'input'"
        v-model.trim="forms.data[item.value]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
        @change="item.change?item.change(forms.data[item.value]):item.id?change(item,forms.data[item.value]):false"
        @keyup.enter.native="item.onclick?item.onclick(forms[item.value]):false"
      />
      <el-input
        v-if="item.type == 'numberInput'"
        v-model.trim="forms.data[item.value]"
        type="number"
        clearable
        :placeholder="item.placeholder"
        :disabled="item.disabled"
        @keyup.enter.native="item.onclick(forms.data[item.value])"
      >
      </el-input>
      
      <el-switch
          v-if="item.type == 'switch'"
          v-model.trim="forms.data[item.value]"
          :active-value="item.options.true"
          :inactive-value="item.options.false"
        />

      <el-select v-if="item.type == 'select'" v-model="forms.data[item.value]" filterable>
        <el-option v-for="(item, index) in item.options" :label="item.name" :value="item.value" :key="index" />
      </el-select>

      <el-button v-if="item.type === 'button'" type="primary" @click="item.onclick">{{ item.label }}</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { reactive, ref } from 'vue'
import {Search } from '@element-plus/icons-vue'

// const emit = defineEmits(["onSubmit"])
const props = defineProps({
  forms: Object
})
const size = ref('default')
const labelPosition = ref('left')
const forms = props.forms;
const change = (item,val)=>{
  if(val === ""){
    forms.data[item.id] = null;
  }
}
</script>
